<template>
  <div class="App">
    <Item
      title="美食"
      :list="[
        {
          id: '001',
          content: '螺蛳粉',
        },
        {
          id: '002',
          content: '薯片',
        },
        {
          id: '003',
          content: '奶茶',
        },
      ]"
    />
    <Item
      title="音乐"
      :list="[
        {
          id: '001',
          content: '民谣',
        },
        {
          id: '002',
          content: '摇滚',
        },
        {
          id: '003',
          content: '爵士',
        },
      ]"
    /><Item
      title="运动"
      :list="[
        {
          id: '001',
          content: '游泳',
        },
        {
          id: '002',
          content: '健身',
        },
        {
          id: '003',
          content: '跳水',
        },
      ]"
    />
  </div>
</template>

<script>
  import Item from "./components/Item.vue";
  export default {
    name: "App",
    components: {
      Item,
    },
    data() {
      return {};
    },
  };
</script>

<style scoped>
  .App {
    display: flex;
    justify-content: space-around;
  }
</style>
